<template>
	<view class="pageStyle">
		<view style="width: 99%;margin: 10rpx auto 0;" v-if="aryTabNames.length > 1">
			<uni-segmented-control :current="current" :values="aryTabNames" @clickItem="handleChangeSubsection"
				styleType="text" activeColor="rgb(0, 151, 255)"
				style="width: 98%;margin: 0 auto;"></uni-segmented-control>
		</view>
		<view class="body_top" v-if="selectList && selectList.length > 0 || selectTime && selectTime.length > 0">
			<view class="body_top_box" v-if="conditionsFilter && conditionsFilter.length">
				<r-row gutter="8" v-for="item in conditionsFilter.filter((_, index) => index < searchNum)"
					:key="item.fieldName">
					<r-col :span="1.5" style="margin-right: 10rpx;">
						<view class="body_top_label">
							{{ item.fieldTitle }}
						</view>
					</r-col>
					<r-col :span="4" v-if="item.type == 'text'">
						<uni-easyinput type="text" input-align="right" placeholder="请输入"
							v-model="queryParamsFilter[item.fieldName]" :height="50"
							:placeholder-style="'font-size:28rpx'" :custom-style="{ fontSize: '28rpx' }"
							:border="true" />
					</r-col>
					<r-col :span="4"
						v-else-if="(item.type == 'macro' && item.controlType == 'select') || item.type == 'select'">
						<view style="display: flex;gap:10rpx;align-items: center;">
							<view style="flex:1" @click="handleSelectList(item)">
								<uni-easyinput suffixIcon="down" input-align="right" placeholder="请选择"
									:value="queryParamsFilter[`${item.fieldName}Name`]" disabled :height="50"
									:placeholder-style="'font-size:28rpx'" :custom-style="{ fontSize: '28rpx' }"
									style="pointer-events: none;" :border="true" />
							</view>
							<uni-icons type="closeempty" color="#303133" size="20"
								v-if="queryParamsFilter[item.fieldName]" @click="handleClearSelect(item)"></uni-icons>
						</view>
					</r-col>
					<r-col :span="4" v-else-if="item.type == 'DATE' || item.type == 'DATE_TIME'">
						<view style="display: flex;gap:10rpx;align-items: center;">
							<view style="flex:1" @click="handleTimeList(item)">
								<uni-easyinput suffixIcon="down" input-align="right" placeholder="请选择"
									:value="`${queryParamsFilter[`${item.fieldName}FromDate`] ? queryParamsFilter[`${item.fieldName}FromDate`] + '/' : ''}${queryParamsFilter[`${item.fieldName}ToDate`] ? queryParamsFilter[`${item.fieldName}ToDate`] : ''}`"
									disabled :height="50" :placeholder-style="'font-size:28rpx'"
									:custom-style="{ fontSize: '28rpx' }" style="pointer-events: none;"
									:border="true" />
							</view>
							<uni-icons type="closeempty" color="#303133" size="20"
								v-if="queryParamsFilter[`${item.fieldName}FromDate`]"
								@click="handleClearTime(item)"></uni-icons>
						</view>
					</r-col>
					<r-col :span="4" v-else-if="item.type == 'checkbox'">
						<uni-data-checkbox multiple v-model="queryParamsFilter[item.fieldName]"
							:localdata="item.fieldOptions"></uni-data-checkbox>
					</r-col>
					<r-col :span="4" v-else-if="item.type == 'radio'">
						<uni-data-checkbox v-model="queryParamsFilter[item.fieldName]"
							:localdata="item.fieldOptions"></uni-data-checkbox>
					</r-col>
					<r-col :span="4" v-else>
						<uni-easyinput type="text" input-align="right" placeholder="请输入"
							v-model="queryParamsFilter[item.fieldName]" :height="50"
							:placeholder-style="'font-size:28rpx'" :custom-style="{ fontSize: '28rpx' }"
							:border="true" />
					</r-col>
				</r-row>

				<DropdownView ref="dropdownViewRef" v-if="conditionsFilter && conditionsFilter.length > searchNum"
					:cusTop="cusTop">
					<template v-slot:slot1>
						<view
							style="padding-bottom: 20rpx;background-color: #fff;width: 100%;padding-right: 20rpx;transition-delay: 5ms;"
							v-if="showMenu">
							<view style="padding-bottom: 20rpx;" class="body_top_box" :key="keyNum">
								<r-row gutter="8" style="width: 100%;"
									v-for="item in conditionsFilter.filter((_, index) => index >= searchNum)"
									:key="item.fieldName">
									<r-col :span="1.5" style="margin-right: 10rpx;">
										<view class="body_top_label">
											{{ item.fieldTitle }}
										</view>
									</r-col>
									<r-col :span="4" v-if="item.type == 'text'">
										<uni-easyinput type="text" input-align="right" placeholder="请输入"
											v-model="queryParamsFilter[item.fieldName]" :height="50"
											:placeholder-style="'font-size:28rpx'" :custom-style="{ fontSize: '28rpx' }"
											:border="true" />
									</r-col>
									<r-col :span="4"
										v-else-if="(item.type == 'macro' && item.controlType == 'select') || item.type == 'select'">
										<view style="display: flex;gap:10rpx;align-items: center;">
											<view style="flex:1" @click="handleSelectList(item)">
												<uni-easyinput suffixIcon="down" input-align="right" placeholder="请选择"
													:value="queryParamsFilter[`${item.fieldName}Name`]" disabled
													:height="50" :placeholder-style="'font-size:28rpx'"
													:custom-style="{ fontSize: '28rpx' }" style="pointer-events: none;"
													:border="true" />
											</view>
											<uni-icons type="closeempty" color="#303133" size="20"
												v-if="queryParamsFilter[item.fieldName]"
												@click="handleClearSelect(item)"></uni-icons>
										</view>
									</r-col>
									<r-col :span="4" v-else-if="item.type == 'DATE' || item.type == 'DATE_TIME'">
										<view style="display: flex;gap:10rpx;align-items: center;">
											<view style="flex:1" @click="handleTimeList(item)">
												<uni-easyinput suffixIcon="down" input-align="right" placeholder="请选择"
													:value="`${queryParamsFilter[`${item.fieldName}FromDate`] ? queryParamsFilter[`${item.fieldName}FromDate`] + '/' : ''}${queryParamsFilter[`${item.fieldName}ToDate`] ? queryParamsFilter[`${item.fieldName}ToDate`] : ''}`"
													disabled :height="50" :placeholder-style="'font-size:28rpx'"
													:custom-style="{ fontSize: '28rpx' }" style="pointer-events: none;"
													:border="true" />
											</view>
											<uni-icons type="closeempty" color="#303133" size="20"
												v-if="queryParamsFilter[`${item.fieldName}FromDate`]"
												@click="handleClearTime(item)"></uni-icons>
										</view>
									</r-col>
									<r-col :span="4" v-else-if="item.type == 'checkbox'">
										<uni-data-checkbox multiple v-model="queryParamsFilter[item.fieldName]"
											:localdata="item.fieldOptions"></uni-data-checkbox>
									</r-col>
									<r-col :span="4" v-else-if="item.type == 'radio'">
										<uni-data-checkbox v-model="queryParamsFilter[item.fieldName]"
											:localdata="item.fieldOptions"></uni-data-checkbox>
									</r-col>
									<r-col :span="4" v-else>
										<uni-easyinput type="text" input-align="right" placeholder="请输入"
											v-model="queryParamsFilter[item.fieldName]" :height="50"
											:placeholder-style="'font-size:28rpx'" :custom-style="{ fontSize: '28rpx' }"
											:border="true" />
									</r-col>
								</r-row>
							</view>
							<view class="search_top_but" style="width: 420rpx;">
								<button size="mini" :hover-class="'buttons'"
									:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
									@click="_search">查询</button>
								<button size="mini" :hover-class="'buttons'"
									:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
									@click="handleCloseMenuType">关闭</button>

							</view>
						</view>
					</template>
				</DropdownView>
			</view>
			<view class="search_top_but">
				<button size="mini" :hover-class="'buttons'"
					:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
					@click="search">查询</button>
				<button size="mini" :hover-class="'buttons'"
					:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
					@click="handleOpenMenu" v-if="conditionsFilter.length > searchNum">更多</button>
			</view>
		</view>
		<view class="pageStyle_file_children" v-if="current == 0">
			<view class="pageStyle_file_children_box" v-for="(item, index) in fileChildren" :key="index"
				@click="handleFileChildren(item)">
				<image src="./static/document.png" mode=""
					style="width:60rpx;height: 60rpx;border-radius: 12rpx;border-radius: 50%;margin-right: 10rpx;">
				</image> {{ item.name }}
			</view>
		</view>
		<l-empty style="height: 50%;display: flex;align-items: center;justify-content: center;" v-if="isNull"></l-empty>
		<slot name="headerMain"></slot>
		<view class="body_conter">
			<view v-if="defaultMain">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in list" :key="index">
						<view class="content_box" @click.stop="itemClick(item, index)">
							<view class="" @click.stop="itemClick(item, index)"
								v-if="pageSetup && pageSetup.length > 0 && pageSetup[0].blocks.length > 0">
								<!-- gutter="16" -->
								<r-row align="center" v-if="pageSetup[0].blocks[0].type == 'flex'"
									@after-mounted="handleAfterMounted">
									<r-col :span="pageSetup[0].blocks[0].width">
										<view class="imgs" style="text-align: center;">
											<image style="width: 80rpx; height: 80rpx;"
												:src="baseUrl + '/' + item.fields.find(el => el.name == pageSetup[0].blocks[0].fieldName)?.value">
											</image>
										</view>
									</r-col>
									<r-col
										:span="pageSetup[0].blocks[0].type == 'flex' ? (6 - Number(pageSetup[0].blocks[0].width)) : 12">
										<view v-for="(row, r) in pageSetup" :key="r">
											<r-row
												:justify="pageSetup[0].blocks[0].type == 'flex' ? 'start' : 'space-between'"
												align="center" :key="r" v-if="showCildRow">
												<r-col
													v-for="(col, c) in pageSetup[0].blocks[0].type == 'flex' ? row.blocks.filter(ck => ck.type != 'flex' && ck.type != 'block') : row.blocks"
													:key="c"
													:span="pageSetup[0].blocks[0].type == 'flex' ? col.width : col.width"
													:fieldName="col.fieldName">
													<view v-if="col.type == 'field'"
														@click.stop="itemClick(item, index)"
														:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', width: '100%', height: '100%' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
														<view
															v-if="item.fields && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].controlType && item.fields.filter(t => t.name == col.fieldName)[0].controlType == 'img'"
															:style="{ width: '100%', height: '100%', textAlign: col.align ? col.align : 'left' }">
															<image style="width: 100%; height: 40rpx;"
																:src="baseUrl + '/' + item.fields.filter(t => t.name == col.fieldName)[0].text">
															</image>
														</view>
														<view v-else
															:style="[{ justifyContent: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor, display: 'flex', alignItems:'center' }]">
															<text v-if="col.fontIcon"
																:class="col.fontIcon ? 'fa ' + col.fontIcon : 'fa-phone'"
																style="margin-right: 6rpx;"></text>
															{{col.label.indexOf('%s') == -1 ? col.label :
																col.label.replace('%s',
																	item.fields.filter(t => t.name == col.fieldName)[0].text)}}
															<view
																:style="getStyle(item.fields.filter(t => t.name == col.fieldName)[0].style)"
																v-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].style">
																<view :class="{overflowHide:col.overflowHide}"
																	v-html="item.fields.filter(t => t.name == col.fieldName)[0].text">

																</view>
															</view>
															<view :class="{overflowHide:col.overflowHide}"
																:style="[{ color: (col.fieldName == 'title' && item.fields.filter(t => t.name == 'color').length > 0 && item.fields.filter(t => t.name == 'color')[0].text) ? item.fields.filter(t => t.name == 'color')[0].text : col.fontColor, fontWeight: (col.fieldName == 'title' && item.fields.filter(t => t.name == 'is_bold').length > 0 && item.fields.filter(t => t.name == 'is_bold')[0].text == 1) ? 'bold' : col.is_bold == 'true' }]"
																v-else-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].text && col.label.indexOf('%s') == -1"
																v-html="item.fields.filter(t => t.name == col.fieldName)[0].text">
															</view>
															<text v-else style="opacity:0">blank</text>
														</view>
													</view>
													<view @click.stop="itemClick(item, index)"
														v-else-if="col.type == 'comb'"
														:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', background: 'url(' + baseUrl + '/' + col.bgImgUrl + ') no-repeat', backgroundSize: '100% 100%', color: col.fontColor, textAlign: col.align ? col.align : 'left' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
														<view :class="{overflowHide:col.overflowHide}"
															v-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.blockId).length > 0 && item.fields.filter(t => t.name == col.blockId)[0].text"
															v-html="item.fields.filter(t => t.name == col.blockId)[0].text">
														</view>
														<text v-else style="opacity:0">blank</text>
													</view>
													<view @click.stop="itemClick(item, index)"
														v-else-if="col.type == 'text'"
														:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', textAlign: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
														{{ col.label }}
													</view>
													<view @click.stop="itemClick(item, index)"
														v-else-if="col.type == 'img'" class="imgs"
														:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold ? 'bold' : '', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ') no-repeat', textAlign: col.align ? col.align : 'left' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
														<image style="width: 100%; height: 40rpx;"
															:src="baseUrl + '/' + col.imgUrl"></image>
													</view>
													<view v-else-if="col.type == 'button'"
														@click.stop="swipeClick({ content: { text: col.btnName } }, index, item, item.colOperateBtns.filter((it) => it.name == col.btnName)[0])"
														:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', textAlign: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
														{{ col.btnName }}
													</view>
													<view @click.stop="itemClick(item, index)"
														v-else-if="col.type == 'blank'" style="opacity:0">blank</view>
													<view class="line" v-else-if="col.type == 'line'">
													</view>
												</r-col>
											</r-row>
										</view>
									</r-col>
								</r-row>
								<template v-else>
									<view v-for="(row, r) in pageSetup" :key="r">
										<r-row
											:justify="pageSetup[0].blocks[0].type == 'flex' ? 'start' : 'space-between'"
											align="center" :key="r">
											<r-col
												v-for="(col, c) in pageSetup[0].blocks[0].type == 'flex' ? row.blocks.filter(ck => ck.type != 'flex' && ck.type != 'block') : row.blocks"
												:key="c" :span="pageSetup[0].blocks[0].type == 'flex' ? 12 : col.width">
												<view v-if="col.type == 'field'" @click.stop="itemClick(item, index)"
													:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', width: '100%', height: '100%' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
													<view
														v-if="item.fields && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].controlType && item.fields.filter(t => t.name == col.fieldName)[0].controlType == 'img'"
														:style="{ width: '100%', height: '100%', textAlign: col.align ? col.align : 'left' }">
														<image style="width: 100%; height: 40rpx;"
															:src="baseUrl + '/' + item.fields.filter(t => t.name == col.fieldName)[0].text">
														</image>
													</view>
													<view v-else
														:style="[{ justifyContent: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor, display: 'flex', alignItems:'center' }]">
														<text v-if="col.fontIcon"
															:class="col.fontIcon ? 'fa ' + col.fontIcon : 'fa-phone'"
															style="margin-right: 6rpx;"></text>
														{{col.label.indexOf('%s') == -1 ? col.label :
															col.label.replace('%s',
																item.fields.filter(t => t.name == col.fieldName)[0].text)}}
														<view
															:style="getStyle(item.fields.filter(t => t.name == col.fieldName)[0].style)"
															v-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].style">
															<view :class="{overflowHide:col.overflowHide}"
																v-html="item.fields.filter(t => t.name == col.fieldName)[0].text">

															</view>
														</view>
														<view :class="{overflowHide:col.overflowHide}"
															:style="[{ color: (col.fieldName == 'title' && item.fields.filter(t => t.name == 'color').length > 0 && item.fields.filter(t => t.name == 'color')[0].text) ? item.fields.filter(t => t.name == 'color')[0].text : col.fontColor, fontWeight: (col.fieldName == 'title' && item.fields.filter(t => t.name == 'is_bold').length > 0 && item.fields.filter(t => t.name == 'is_bold')[0].text == 1) ? 'bold' : col.is_bold == 'true' }]"
															v-else-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.fieldName).length > 0 && item.fields.filter(t => t.name == col.fieldName)[0].text && col.label.indexOf('%s') == -1"
															v-html="item.fields.filter(t => t.name == col.fieldName)[0].text">
														</view>
														<text v-else style="opacity:0">blank</text>
													</view>
												</view>
												<view @click.stop="itemClick(item, index)"
													v-else-if="col.type == 'comb'"
													:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', background: 'url(' + baseUrl + '/' + col.bgImgUrl + ') no-repeat', backgroundSize: '100% 100%', color: col.fontColor, textAlign: col.align ? col.align : 'left' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
													<view :class="{overflowHide:col.overflowHide}"
														v-if="item.fields && item.fields.length > 0 && item.fields.filter(t => t.name == col.blockId).length > 0 && item.fields.filter(t => t.name == col.blockId)[0].text"
														v-html="item.fields.filter(t => t.name == col.blockId)[0].text">
													</view>
													<text v-else style="opacity:0">blank</text>
												</view>
												<view @click.stop="itemClick(item, index)"
													v-else-if="col.type == 'text'"
													:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', textAlign: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
													{{ col.label }}
												</view>
												<view @click.stop="itemClick(item, index)" v-else-if="col.type == 'img'"
													class="imgs"
													:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold ? 'bold' : '', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ') no-repeat', textAlign: col.align ? col.align : 'left' }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
													<image style="width: 100%; height: 40rpx;"
														:src="baseUrl + '/' + col.imgUrl"></image>
												</view>
												<view v-else-if="col.type == 'button'"
													@click.stop="swipeClick({ content: { text: col.btnName } }, index, item, item.colOperateBtns.filter((it) => it.name == col.btnName)[0])"
													:style="[{ backgroundColor: col.bgColor ? col.bgColor : 'transparent', font: col.font ? col.font : '', fontSize: col.fontSize ? col.fontSize + 'rpx' : '32rpx', fontWeight: col.isBold == 'true' ? 'bold' : '', textAlign: col.align ? col.align : 'left', backgroundImage: 'url(' + baseUrl + '/' + col.bgImgUrl + ')', backgroundRepeat: 'no-repeat', color: col.fontColor }, { paddingTop: col.paddingTop ? col.paddingTop + 'rpx' : '0rpx', paddingBottom: col.paddingBottom ? col.paddingBottom + 'rpx' : '0rpx', paddingLeft: col.paddingLeft ? col.paddingLeft + 'rpx' : '0rpx', paddingRight: col.paddingRight ? col.paddingRight + 'rpx' : '0rpx', marginTop: col.marginTop ? col.marginTop + 'rpx' : '0rpx', marginRight: col.marginRight ? col.marginRight + 'rpx' : '0rpx', marginBottom: col.marginBottom ? col.marginBottom + 'rpx' : '0rpx', marginLeft: col.marginLeft ? col.marginLeft + 'rpx' : '0rpx' }]">
													{{ col.btnName }}
												</view>
												<view @click.stop="itemClick(item, index)"
													v-else-if="col.type == 'blank'" style="opacity:0">blank</view>
												<view class="line" v-else-if="col.type == 'line'">
												</view>
											</r-col>
										</r-row>
									</view>
								</template>
							</view>
							<view v-if="!pageSetup || pageSetup.length == 0 || pageSetup[0].blocks.length == 0">
								<view v-for="(row, co) in cols" :key="co">
									<r-row gutter="16">
										<r-col :span="6" style="margin-bottom:10rpx"
											@click.stop="itemClick(item, index)">
											<view>
												{{item.fields ? item.fields.filter(t =>
													t.name == row.name).length > 0 ? item.fields.filter(t =>
														t.name == row.name)[0].text : '' : ''}}
											</view>
										</r-col>
									</r-row>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view style="display: flex;height: calc(100% - 20rpx);">
								<view class="slot-button" v-for="(btn, name) in item.colOperateSwipeBtns" :key="name">
									<view class="slot-button-con" style="background-color:#de9a10"
										@touchend.stop="swipeClick({ content: { text: btnEditName } }, index, item)"
										v-if="btn.type == 'EDIT'">
										<text class="slot-button-text">{{ btnEditName }}</text>
									</view>
									<view class="slot-button-con" style="background-color:#ff5a5f"
										@touchend.stop="swipeClick({ content: { text: btnDelName } }, index, item)"
										v-if="btn.type == 'DEL'">
										<text class="slot-button-text">{{ btnDelName }}</text>
									</view>
									<view class="slot-button-con" style="background-color:#5555ff"
										@touchend.stop="swipeClick({ content: { text: btn.name } }, index, item, btn)"
										v-if="btn.type == 'CLICK' || btn.type == 'FLOW' || btn.type == 'LINK' || btn.type == 'MODULE'">
										<text class="slot-button-text">{{ btn.name }}</text>
									</view>
								</view>
							</view>
						</template>
						<view style="height: 20rpx;">

						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</view>
			<slot name="bottomMain"></slot>
		</view>

		<view class="body_bottom" @click="addModule" v-if="isAdd || canAdd">
			{{ btnAddName }}
		</view>
		<TkiTree idKey="value" rangeKey="name" :range="fieldOptions" ref="fieldOptionsRef"
			@confirm="handlefieldOptionsConfirm" :multiple="false" />
		<MxDatepicker
			:type="currentFilter.fieldCond == 0 ? (currentFilter.type=='DATE'?'range':'rangetime') : (currentFilter.type=='DATE'?'date':'datetime')"
			:show="selectTimeValueShow" :value="currentFilter.fieldCond == 0 ? valueTimes : valueTime" :show-tips="true"
			:begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="true" @confirm="confirmTime2"
			@cancel="selectTimeValueShow = false" />
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getAction,
		deleteDefaultAction,
		deleteAction,
		postFormAction,
	} from "@/utils/request.js";
	import {
		Api
	} from "@/utils/Api.js";
	import TkiTree from '@/components/tki-tree/tki-tree.vue'
	import DropdownView from './components/dropdownView/DropdownView.vue'
	import MxDatepicker from './components/mx-datepicker/mx-datepicker'
	import {
		useList
	} from '../pages/use/useList';

	const props = defineProps({
		params: {
			type: Object,
			default: () => {
				return {};
			},
		},
		url: {
			type: Object,
			default: () => {
				return {
					list: "/modular/list",
				};
			},
		},
		listRecord: {
			type: Object,
			default: () => {
				return {};
			},
		},
		//额外参数
		otherRecord: {
			type: Object,
			default: () => {
				return {};
			},
		},
		nativeTo: {
			type: String,
			default: "/application/chilPage/rectificationNoticeDetails",
		},
		isDefaultNativeTo: {
			type: Boolean,
			default: true,
		},
		defaultMain: {
			type: Boolean,
			default: true,
		},
		//编辑
		nativeToEdit: {
			type: String,
			default: "",
		},
		//新增
		nativeToAdd: {
			type: String,
			default: "/application/moduleAddEdit",
		},
		isAdd: {
			type: Boolean,
			default: false,
		},
		addName: {
			type: String,
			default: "新增",
		},
		isTreeView: {
			type: Boolean,
			default: false,
		},
	})

	const emit = defineEmits(['itemClick'])

	const describe = '列表'
	const model = ref({})
	const selectShow = ref(false)
	const selectText = ref('')
	const selectTimeShow = ref(false)
	const isHadSearch = ref(false)
	const selectTimeText = ref('')
	const selectTimeValue = ref('')
	const selectTimeValueShow = ref(false)
	const times = ref({
		year: true,
		month: true,
		day: true,
		hour: false,
		minute: false,
		second: false,
	})
	const searchQueryTime = ref({
		label: "",
		value: "",
		cond: "",
		condValue: "",
		fromDate: "",
		toDate: "",
		fromDateValue: "",
		toDateValue: "",
	})
	const urlDelete = "/modular/del"
	const baseUrl = Api.baseUrl
	const formJs = ref(null)
	const searchNum = 2
	const keyNum = ref(10000)
	const aryTab = ref([]) //顶部tab
	const aryTabNames = ref([]) //顶部tab name
	const current = ref(0)
	const valueTime = ref()
	const valueTimes = ref([])
	const showCildRow = ref(false)
	const cusTop = ref(0)

	// #ifdef MP-WEIXIN
	cusTop.value = 50
	// #endif

	const handleAfterMounted = () => {
		setTimeout(() => {
			showCildRow.value = true
		}, 10)
	}
	//列表请求完成
	const hadSearchData = (list) => {
		if (isHadSearch.value) {
			isHadSearch.value = false;
		}
	}

	const {
		page,
		queryParam,
		queryParamsFilter,
		moduleName,
		canEdit,
		btnEditName,
		btnDelName,
		btnAddName,
		list,
		currentFilter,
		fieldOptions,
		selectList,
		selectTime,
		isNull,
		canAdd,
		fileChildren,
		pageSetup,
		cols,
		conditionsFilter,
		getListData,
		getOnReachBottom
	} = useList({
		url: props.url,
		afterSearch: hadSearchData
	})




	//点击文件夹
	const handleFileChildren = (record) => {
		const params = {
			...record,
			treeNodeCode: record.code,
			code: 'document',
		}
		uni.navigateTo({
			url: `/application/moduleList?record=${JSON.stringify(params)}&isTreeView=true`
		});
	}


	//获取顶部tabs配置
	const getVisualListPage = () => {
		postFormAction('/visual/listPage', {
			moduleCode: queryParam.value.moduleCode,
			treeNodeCode: queryParam.value.treeNodeCode,
			isTreeView: props.isTreeView,
		}).then(res => {
			const data = res.data.aryTab || []
			aryTab.value = data
			if (data && data.length) {
				aryTabNames.value = data.map(item => item.name)
			}
		})
	}

	let moduleCodeForLog = ''
	let moduleCode = ''
	//分段器change
	const handleChangeSubsection = ({
		currentIndex: index
	}) => {
		current.value = index
		const record = aryTab.value[index]
		console.log("handleChangeSubsection-record", record)
		if (record.type == 'logList' || record.type == 'logListRead') {
			moduleCode = record.params.moduleCodeLog;
			moduleCodeForLog = record.params.moduleCode;
		} else {
			moduleCode = record.params.moduleCode;
			moduleCodeForLog = ''
		}
		queryParam.value = {
			op: 'search',
			...queryParam.value,
			moduleCodeForLog: moduleCodeForLog,
			moduleCode: moduleCode,
		}
		queryParamsFilter.value = {}
		getListData();
	}

	const search = () => {
		page.value = 1;
		queryParam.value = props.params;
		getVisualListPage()
		console.log('queryParam.value=>', queryParam.value)
		const _queryParamsFilter = {}
		for (let v in queryParamsFilter.value) {
			const temp = queryParamsFilter.value
			if (Array.isArray(temp[v])) {
				_queryParamsFilter[v] = temp[v].join(',')
			} else {
				_queryParamsFilter[v] = temp[v]
			}

			let it = conditionsFilter.value.filter((item) => item.fieldName == v);
			if (it && it.length > 0) {
				_queryParamsFilter[v + '_cond'] = it[0].fieldCond;
			}
		}

		queryParam.value = {
			op: 'search',
			...queryParam.value,
			..._queryParamsFilter,
		}
		if (moduleCodeForLog) {
			queryParam.value.moduleCodeForLog = moduleCodeForLog
			queryParam.value.moduleCode = moduleCode
		}
		if (moduleCode) {
			queryParam.value.moduleCodeForLog = moduleCodeForLog
			queryParam.value.moduleCode = moduleCode
		}

		setTimeout(() => {
			getListData();
		}, 200);
	}

	const itemClick = (item, index) => {
		console.log("点击了", item, index);
		uni.navigateTo({
			url: `${props.nativeTo}?record=${JSON.stringify({
			id: item.id,
			moduleCode: item.code,
			code: queryParam.value.moduleCode,
			moduleName: moduleName.value,
		})}`,
		});
	}


	const itemToDetails = (item) => {
		if (props.isDefaultNativeTo) {
			item.fields.forEach((el) => {
				if (el.name == "location" || el.name == "fujian") {
					el.text = "";
				}
			});
			if (canEdit.value && props.nativeToEdit) {
				uni.navigateTo({
					url: `${props.nativeToEdit}?record=${JSON.stringify({
					id: item.id,
					code: queryParam.value.moduleCode,
				})}`,
				});
			} else {
				uni.navigateTo({
					url: `${props.nativeTo}?record=${JSON.stringify({ ...item, code: queryParam.value.moduleCode, })}&listRecord=${JSON.stringify(props.listRecord)}&otherRecord=${JSON.stringify(props.otherRecord)}`,
				});
			}
		} else {
			emit("itemClick", item, index);
		}
	}

	//新增
	const addModule = () => {
		if (queryParam.value.treeNodeCode) {
			props.listRecord.treeNodeCode = queryParam.value.treeNodeCode;
		}
		uni.navigateTo({
			url: `${props.nativeToAdd}?record=${JSON.stringify(props.listRecord)}`,
		});
	}

	const swipeClick = (e, index, item, btn) => {
		console.log('swipeClick', {
			e,
			index,
			item,
			btn
		});
		let {
			content
		} = e;
		if (content.text == btnEditName.value) {
			itemToDetails(item);
		} else if (content.text === btnDelName.value) {
			uni.showModal({
				title: "提示",
				content: "是否确定删除",
				success: (res) => {
					if (res.confirm) {
						handleDelete(item, index);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		}

		if (btn) {
			console.log('btn', btn);
			console.log('props.params', props.params);
			if (btn.type == 'CLICK') {
				if (formJs.value) {
					let {
						launchJs
					} = formJs.value;
					launchJs(btn.script);
				}
			} else if (btn.type == 'FLOW') {
				btn.typeCode = btn.flowTypeCode;
				let record = {
					op: 'opLinkFlow',
					flowType: 2,
					...btn
				};
				console.log('record', record);
				uni.navigateTo({
					url: `/application/processInit?record=${JSON.stringify(record)}`,
				});
			} else if (btn.type == 'MODULE') {
				let record = {
					code: btn.moduleCode,
					moduleId: btn.moduleId
				}
				let url = `/application/moduleList?record=${JSON.stringify(record)}`;
				uni.navigateTo({
					url: url,
				});
			} else if (btn.type == 'LINK') {
				uni.navigateTo({
					url: btn.link,
				});
			}
		}
	}
	//单个删除
	const handleDelete = (record, index) => {
		postFormAction(urlDelete, {
			id: record.id,
			moduleCode: props.params.moduleCode,
		}).then((res) => {
			uni.showToast({
				title: res.msg,
			});
			if (res.res == 0) {
				list.value.splice(index, 1);
			}
		});
	}
	const fieldOptionsRef = ref(null)
	//处理下拉和树
	const handleSelectList = (record) => {
		currentFilter.value = record
		fieldOptions.value = record.fieldOptions || []
		fieldOptions.value.forEach((item) => {
			item.name = item.name.toString();
		})
		fieldOptionsRef.value._show()
	}

	const handlefieldOptionsConfirm = (e) => {
		if (e && e.length) {
			queryParamsFilter.value[currentFilter.value.fieldName] = e[0].value
			queryParamsFilter.value[`${currentFilter.value.fieldName}Name`] = e[0].name
		}
	}
	//清除已选
	const handleClearSelect = (item) => {
		queryParamsFilter.value[item.fieldName] = ''
		queryParamsFilter.value[`${item.fieldName}Name`] = ''
	}


	//时间选择
	const handleTimeList = (record) => {
		currentFilter.value = record
		selectTimeValueShow.value = true
		if (currentFilter.value.fieldCond == 0) {
			if (queryParamsFilter.value[`${currentFilter.value.fieldName}FromDate`]) {
				valueTimes.value = [queryParamsFilter.value[`${currentFilter.value.fieldName}FromDate`],
					queryParamsFilter.value[`${currentFilter.value.fieldName}ToDate`]
				]
			} else {
				valueTimes.value = []
			}
		} else {
			valueTime.value = queryParamsFilter.value[currentFilter.value.fieldName] || ''
		}
	}
	// 时间回调
	const confirmTime2 = (e) => {
		console.log("confirmTime2", e)
		// fieldCond 0是时间段 1是时间点
		if (currentFilter.value.fieldCond == 0) {
			queryParamsFilter.value[`${currentFilter.value.fieldName}FromDate`] = e.value[0]
			queryParamsFilter.value[`${currentFilter.value.fieldName}ToDate`] = e.value[1]
		} else {
			queryParamsFilter.value[currentFilter.value.fieldName] = e.value;
		}
		selectTimeValueShow.value = false
	}

	//清除时间
	const handleClearTime = (record) => {
		if (record.fieldCond == 0) {
			queryParamsFilter.value[`${record.fieldName}FromDate`] = ''
			queryParamsFilter.value[`${record.fieldName}ToDate`] = ''
		} else {
			queryParamsFilter.value[record.fieldName] = ''
		}
	}


	//弹窗里的查询
	const _search = () => {
		handleCloseMenuType()
		search()
	}

	const dropdownViewRef = ref(null)
	const showMenu = ref(false)
	//打开菜单
	const handleOpenMenu = () => {
		dropdownViewRef.value.openMenuItemPopup()
		showMenu.value = true
		setTimeout(() => {
			keyNum.value += 1
		}, 100)
	}
	//关闭当前菜单
	const handleCloseMenuType = () => {
		dropdownViewRef.value.closeMenuPopup()
		showMenu.value = false
	}

	const loadFormJs = async () => {
		let frmJs = null;
		try {
			frmJs = await import("./form/form_js_" + props.params.formCode + ".js");
		} catch (e) {
			console.warn(e);
		}
		console.log('frmJs', frmJs);
		formJs.value = frmJs;
	}

	const fetch = () => {
		loadFormJs()
	}

	onMounted(fetch)

	defineExpose({
		search,
		getOnReachBottom
	})

	const hexToRgba = (hex) => {
		// 移除前缀#符号
		hex = hex.replace(/^\s*#|\s*$/g, '');

		// 将三位十六进制数转换为二位数
		if (hex.length === 3) {
			hex = hex.replace(/(.)/g, '$1$1');
		}

		// 提取R、G、B、A的值
		const r = parseInt(hex.substr(0, 2), 16),
			g = parseInt(hex.substr(2, 2), 16),
			b = parseInt(hex.substr(4, 2), 16),
			a = parseInt(hex.length === 8 ? hex.substr(6, 2) : 'FF', 16) / 255;

		// 返回RGBA对象
		return {
			r,
			g,
			b,
			a
		};
	};

	const getStyle = (item, isStr) => {
		const obj = {
			display: 'inline-block',
			fontSize: '28rpx'
		};
		if (item.isTag) {
			obj.padding = '6rpx 20rpx';
			obj.borderRadius = '6rpx';
			if (item.color) {
				obj.color = item.color;
				const {
					r,
					g,
					b
				} = hexToRgba(item.color);
				obj.backgroundColor = `rgba(${r},${g},${b},.2)`;
			}
		} else {
			if (item.color) {
				obj.color = item.color;
			}
		}

		if (isStr) {
			return (
				Object.entries(obj)
				.map(([key, value]) => {
					// 将驼峰转为短横线命名（如 fontSize -> font-size）
					const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
					return `${cssKey}:${value}`;
				})
				.join(';') + ';'
			);
		}
		return obj;
	};
</script>
<style lang="scss" scoped>
	@import url("../static/scss/common.scss");

	.pageStyle {
		height: 100%;
		font-size: 34rpx;

		&_file_children {
			background-color: #fff;
			margin: 20rpx;

			&_box {
				padding: 10rpx 20rpx;
				color: #959595;
				display: flex;
				align-items: center;
			}
		}

		.slot-button {
			/* #ifndef APP-NVUE */
			display: flex;
			height: 100%;
			/* #endif */
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			padding-bottom: 20rpx;

			.slot-button-con {
				height: 100%;
				width: 96rpx;
				padding: 0 20rpx;
				//   border-radius: 16rpx;
				/* #ifndef APP-NVUE */
				display: flex;
				height: 100%;
				/* #endif */
				display: flex;
				// flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.slot-button-text {
				color: #ffffff;
				font-size: 14px;
			}
		}

		.buttons {
			background-color: "#31E6E1";
			border: "none";
			color: "#fff";
		}

		.marginBottom20 {
			margin-bottom: 20rpx;
		}

		.body_top {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.body_top_box {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}

			.body_top_label {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				height: 56rpx;
				justify-content: flex-end;
			}

		}

		.body_conter {
			padding: 20rpx 20rpx 100rpx;
		}

		.content_box {
			background: #ffffff;
			padding: 30rpx;
			border-radius: 15rpx;
			// box-shadow: -3rpx 0px 22rpx 3rpx rgba(87, 193, 189, 0.2);
			border: 1px solid rgb(229, 229, 229, .6);

			.imgs {
				width: 100%;
				height: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}

			.line {
				width: 100%;
				height: 1;
				margin: 20rpx 0;
				border-top: 1px solid #eee;
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			background-color: #31e6e1;
		}

		.timeBut {
			padding: 20rpx;
		}
	}

	.search_top_but {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		gap: 20rpx;
	}

	.overflowHide {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>